<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="width"
    :visible="visible"
    @close="handleCancel"
    destroyOnClose
  >
    <a-tabs type="card" @change="callback">
      <a-tab-pane key="1" tab="采购订单信息">
        <purchase-order-info-tab ref="purchaseOrderInfoTab" :record="model"></purchase-order-info-tab>
      </a-tab-pane>
      <a-tab-pane key="2" tab="订单材料信息">
        <purchase-material-info-tab ref="purchaseMaterialInfoTab" :materialData="materialData" :record="model"></purchase-material-info-tab>
      </a-tab-pane>
    </a-tabs>

    <!--<div>
      <a-row>
        <a-col :span="5">
          <span style="font-weight: bold">编号：</span>{{model.purchaseNo}}
        </a-col>
        <a-col :span="5">
          <span style="font-weight: bold">单据日期：</span>{{model.receiptsTime}}
        </a-col>
        <a-col :span="5">
          <span style="font-weight: bold">交货日期：</span>{{model.deliveryTime}}
        </a-col>
        <a-col :span="5">
          <span style="font-weight: bold">供应商：</span>{{model.supplierName}}
        </a-col>
        <a-col :span="4">
          <span style="font-weight: bold">采购人员：</span>{{model.purchasePeople}}
        </a-col>
      </a-row>
    </div>

    <div style="margin-top: 15px;margin-bottom: 15px">
      <a-row>
        <a-col :span="5">
          <span style="font-weight: bold">创建人：</span>{{model.createBy}}
        </a-col>
        <a-col :span="5">
          <span style="font-weight: bold">创建时间：</span>{{model.createTime}}
        </a-col>
        <a-col :span="5">
          <span style="font-weight: bold">订单状态：</span>{{this.statusValue}}
        </a-col>
        <a-col :span="5">
          <span style="font-weight: bold">审批原因：</span>{{model.reason == null ? "无" : model.reason}}
        </a-col>
        <a-col :span="4">
          <span style="font-weight: bold">仓库：</span>{{model.depositoryName}}
        </a-col>
      </a-row>
    </div>

    <div style="margin-bottom: 5px">
      <a-row>
        <a-col :span="5">
          <span style="font-weight: bold">备注：</span>{{model.remark == null || model.remark == "" ? "无":model.remark}}
        </a-col>
        <a-col :span="14">
          <span style="font-weight: bold" v-if="model.relevanceBeLaidUpNo == null || model.relevanceBeLaidUpNo == ''">关联的入库单：无</span>
          <span style="font-weight: bold" v-if="model.relevanceBeLaidUpNo != null && model.relevanceBeLaidUpNo != ''">关联的入库单：
            <a @click="relevanceBeLaidUpNoDetail(item)" v-for="(item,index) in model.relevanceBeLaidUpNos" style="margin-right: 15px">{{item}}</a>
          </span>
        </a-col>
        <a-col :span="5">
          <a-button type="primary" v-if="model.orderStatus == 3" @click="inDepositoryInfo">入库情况</a-button>
          <a-button style="margin-right: 10px;margin-left: 10px" type="primary" icon="download" @click="leadingOut">导出Excel</a-button>
          <a-button type="primary" v-if="model.orderStatus == 3" @click="createInDepositoryOrder">生成入库单</a-button>
        </a-col>
      </a-row>
    </div>-->

    <!--<a-row>
      <a-col :span="12">
        优惠率：<span>{{model.discountedRate}}&nbsp;%</span>
      </a-col>
      <a-col :span="12">
        优惠金额：<span>{{model.discountedMoney}}</span>
      </a-col>
    </a-row>
    <a-row style="margin-top: 3px;margin-bottom: 10px">
      <a-col :span="12">
        合计：<span>{{model.purchasePrice}}</span>
      </a-col>
      <a-col :span="12">
        优惠后金额：<span>{{model.discountedPurchasePrice}}</span>
      </a-col>
    </a-row>

    <div class="list">
      <van-list
        v-model="loading"
        :finished="finished"
        offset="100"
        finished-text="没有更多了"
        :immediate-check="false"
      >
        <div
          class="customer-list"
          v-for="(item,i) in materialData"
          :key="i"
        >
          <div>
            <div class="name">材料名称：{{ item.materialName || '无' }}</div>
            <div class="contact">
              <span>型号：{{ item.modelNumber || '无' }}</span>
            </div>
            <div class="contact">
              <span>规格：{{ item.specifications || '无' }}</span>
            </div>
            <div class="contact">
              <span>品牌：{{ item.brand || '无' }}</span>
              <span style="margin-left: 20px">单价：{{ item.unitPrice || '无' }}</span>
            </div>
            <div class="contact">
              <span>折扣率(%)：{{ item.discountRate || '无' }}</span>
              <span style="margin-left: 20px">折扣额：{{ item.discountMoney || '无' }}</span>
            </div>
            <div class="contact">
              <span>折后单价：{{ item.discountUnitPrice || '无' }}</span>
              <span style="margin-left: 20px;margin-right: 20px">数量：{{ item.materialNum || '无' }}</span>
              <span>小计：{{ item.subtotal || '无' }}</span>
            </div>
            &lt;!&ndash;<div class="contact">
                <span>订单状态：
                  <a-tag v-if="item.orderStatus === 1">草稿</a-tag>
                  <a-tag color="orange" v-if="item.orderStatus === 2">审批中</a-tag>
                  <a-tag color="green" v-if="item.orderStatus === 3">审批通过</a-tag>
                  <a-tag color="red" v-if="item.orderStatus === 4">未通过</a-tag>
                  <a-tag color="magenta" v-if="item.orderStatus === 5">已撤销</a-tag>
                </span>
              <span style="margin-left: 20px">审批人：{{ item.approvedBy || "无" }}</span>
            </div>
            <div class="contact">
              <span>仓库：{{ item.depositoryName || '无' }}</span>
              &lt;!&ndash;<span style="float: right">
                <a @click="transferFormDetail(item)">详情</a>
                <a-divider type="vertical" />
                <a @click="placeOrderRecord(item)">下单记录</a>
              </span>&ndash;&gt;
            </div>
            <div class="contact">
                <span>入库状态：
                  <a-tag color="orange" v-if="item.orderStatus === 1">未入库</a-tag>
                  <a-tag color="blue" v-if="item.orderStatus === 2">部分入库</a-tag>
                  <a-tag color="green" v-if="item.orderStatus === 3">完全入库</a-tag>
                </span>
            </div>&ndash;&gt;
          </div>
        </div>
      </van-list>
    </div>-->

    <!--<div id="exportData">
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        class="j-table-force-nowrap"
        bordered
        :data-source="materialData"
        :columns="columns"
        :pagination="false"
        :rowKey="(record,index)=>{return index}"
      >
      </a-table>


    </div>-->

    <in-depository-info-modal ref="inDepositoryInfoModal"></in-depository-info-modal>
    <in-depository-order-detail-modal ref="inDepositoryOrderDetailModal"></in-depository-order-detail-modal>
  </a-drawer>

  <!--<j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :footer="null"
    switchFullscreen
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">


  </j-modal>-->
</template>

<script>
  import { getAction, postAction} from '@/api/manage'
  import '@/assets/less/TableExpand.less'
  import inDepositoryInfoModal from "./inDepositoryInfoModal";
  import inDepositoryOrderDetailModal from "../../purchaseInDepositoryOrder/modules/inDepositoryOrderDetailModal";
  import purchaseOrderInfoTab from "./tab/purchaseOrderInfoTab";
  import purchaseMaterialInfoTab from "./tab/purchaseMaterialInfoTab";

  export default {
    name: 'purchaseOrderDetailModal',
    components: {
      inDepositoryInfoModal,
      inDepositoryOrderDetailModal,
      purchaseOrderInfoTab,
      purchaseMaterialInfoTab
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },

    data() {
      return {
        materialData: [],
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: '3%',
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '名称',
            dataIndex: 'materialName',
            width: '13%',
            align: "center",
            scopedSlots: {customRender: 'materialName'},
          },
          {
            title: '型号',
            dataIndex: 'modelNumber',
            width: '12%',
            align: "center",
            scopedSlots: {customRender: 'modelNumber'},
          },
          {
            title: '规格',
            dataIndex: 'specifications',
            width: '13%',
            align: "center",
            scopedSlots: {customRender: 'specifications'},
          },
          {
            title: '品牌',
            dataIndex: 'brand',
            width: '12%',
            align: "center",
            scopedSlots: {customRender: 'brand'},
          },
          {
            title: '单位',
            dataIndex: 'unit',
            width: '5%',
            align: "center",
          },
          {
            title: '市场价',
            dataIndex: 'marketPrice',
            width: '5%',
            align: "center",
            scopedSlots: {customRender: 'marketPrice'},
          },
          {
            title: '预算价',
            dataIndex: 'estimatedCost',
            width: '5%',
            align: "center",
            scopedSlots: {customRender: 'estimatedCost'},
          },
          {
            title: '成本价',
            dataIndex: 'costPrice',
            width: '5%',
            align: "center",
          },
          {
            title: '单价',
            dataIndex: 'unitPrice',
            width: '5%',
            align: "center",
            scopedSlots: {customRender: 'unitPrice'},
          },
          {
            title: '数量',
            dataIndex: 'materialNum',
            width: '5%',
            align: "center",
            scopedSlots: {customRender: 'materialNum'},
          },
          {
            title: '折扣率(%)',
            dataIndex: 'discountRate',
            width: '7%',
            align: "center",
            scopedSlots: {customRender: 'discountRate'},
          },
          {
            title: '折扣额',
            dataIndex: 'discountMoney',
            width: '7%',
            align: "center",
            scopedSlots: {customRender: 'discountMoney'},
          },
          {
            title: '折后单价',
            dataIndex: 'discountUnitPrice',
            width: '7%',
            align: "center",
            scopedSlots: {customRender: 'discountUnitPrice'},
          },
          {
            title: '小计金额',
            dataIndex: 'subtotal',
            width: '5%',
            align: "center",
            scopedSlots: {customRender: 'subtotal'},
          },
          {
            title: '备注',
            dataIndex: 'remark',
            width: '12%',
            align: "center",
            scopedSlots: {customRender: 'remark'},
            customRender:function (text) {
              return text != null ? text:"无"
            }
          },
        ],
        title: '',
        statusValue:"",
        width: '100%',
        visible: false,
        disableSubmit: false,
        fullscreen: true,
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        contractTableData:[],
        url: {
          queryPurchaseOrderItemList: "/ghSupplychainPurchaseOrderItem/list",
          createInDepositoryOrderUrl: "/ghSupplychainPurchaseOrder/createInDepositoryOrder",
          exportXlsUrl: "/ghSupplychainPurchaseOrder/exportXls",
          importExcelUrl: "/ghSupplychainPurchaseOrder/importExcel",
          queryPurchaseByOrderNo:"/ghSupplychainPurchaseOrder/queryPurchaseByOrderNo",
        },
        finished: false,
        loading: false,
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    created() {

    },
    methods: {
      //切换选项卡时调用
      callback(key) {
        //console.log(key);
      },
      relevanceBeLaidUpNoDetail(orderNo){
        getAction(this.url.queryPurchaseByOrderNo, {orderNo: orderNo}).then((res) => {
          if (res.success) {
            var orderObj = res.result;
            if (orderObj == null){
              this.$message.error("暂无该订单的信息");
              return;
            }else {
              this.$refs.inDepositoryOrderDetailModal.title = "采购入库订单详情";
              this.$refs.inDepositoryOrderDetailModal.showDetail(orderObj);
            }
          }
        })
      },
      //入库情况
      inDepositoryInfo(){
        this.$refs.inDepositoryInfoModal.title = "入库情况";
        this.$refs.inDepositoryInfoModal.beLaidUpStatus = this.model.beLaidUpStatus;
        this.$refs.inDepositoryInfoModal.showInDepositoryInfo(this.materialData);
      },
      //生成入库单
      createInDepositoryOrder(){
        var that = this;
        this.model.materialPurchaseOrderItemVos = this.materialData;
        postAction(this.url.createInDepositoryOrderUrl,this.model).then(res=>{
          if (res.success) {
            this.$message.success(res.message);
            that.$emit('ok');
            that.close();
          }else {
            this.$message.error(res.message);
          }
        })
      },
      getOrderStatusValue(status){
        switch (status) {
          case 1:
            this.statusValue = "草稿"
            return "草稿"
            break;
          case 2:
            this.statusValue = "审批中"
            return "审批中"
            break;
          case 3:
            this.statusValue = "审批通过"
            return "审批通过"
            break;
          case 4:
            this.statusValue = "未通过"
            return "未通过"
            break;
          case 5:
            this.statusValue = "已撤销"
            return "已撤销"
            break;
        }
      },
      showDetail(record) {
        this.getOrderStatusValue(record.orderStatus)
        this.model = Object.assign({}, record);
        this.model.statusValue = this.statusValue;
        getAction(this.url.queryPurchaseOrderItemList, {id: record.id}).then((res) => {
          if (res.success) {
            this.materialData = res.result.records || res.result;
            this.finished = true;
            this.loading = false;
          }
        })
        this.visible = true;
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleCancel() {
        this.close()
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';

  .editable-row-operations a {
    margin-right: 8px;
  }

  .tableHiddle {
    display: none;
  }

  /deep/ .van-dropdown-menu__bar{
    height: 30px;
    box-shadow: none;
    border: 1px solid lightgrey;
    border-radius: 5px;
  }

  .list{
    overflow-y: scroll;
    height:calc(100vh - 250px);
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .customer-list {
    align-items: center;
    border-top: 1px solid #d9d9d9;
    /*height: 120px;*/
  }
  .name{
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 13px;
    color: #161616;
    line-height: normal;
  }
  .contact{
    font-size: 12px;
    color: #a39f9f;
    margin-bottom: 5px;
  }
</style>